What are We Making?

Koffee Lovers Vue3 PWA#

In this post, we will look at building a coffee web application with progressive web app (PWA).

Introduction

The JavaScript ecosystem is evolving fast, and Bun is leading the charge. Since its 1.0 release, Bun has proven itself as a legitimate alternative to Node.js—offering significantly faster startup times, native TypeScript support, and an all-in-one toolkit that includes a package manager, bundler, and test runner.

When paired with Nitro, you get a server stack that's both incredibly fast and deployment-agnostic.

In this post, we'll explore:

• Why Bun matters in 2026
• Setting up Bun with Nitro
• Performance benefits and benchmarks
• Migration strategies from Node.js
• Real-world deployment

Let's build the fastest server stack you've ever used.

Introduction

Dioxus 0.7 is the latest stable version of a powerful cross-platform UI framework built in Rust. With Dioxus, developers can use a single Rust codebase to build applications that run on the web, desktop, and mobile platforms — all while leveraging Rust’s performance, strong type safety, and modern tooling. oaicite:0

In this post, we’ll explore what Dioxus is, how it works, and how you can start building your first app using its declarative UI syntax and cross-platform capabilities.

Introduction

In our BrewStop food truck series, we used Unstorage for data persistence—an excellent choice for prototypes and simple applications. But when you're building for production, you need something more robust: a proper database with type-safe queries, migrations, and scalable architecture.

That's where Drizzle ORM comes in.

Drizzle is a lightweight, TypeScript-first ORM that gives you the control of raw SQL with the ergonomics of an ORM. It pairs beautifully with Nitro, offering a production-ready data layer that won't slow you down.

In this post, we'll build a complete database-backed API using Drizzle ORM + Nitro—covering setup, schema design, queries, and deployment.

Just Starting

Hey, I am Vantol, I am a Jamaican - FullStack Developer - and Educator in the Jamaican school system. (I teach Math to kids! Help Me! Please!) LOL!

Introduction

Most backend tutorials stop at “Hello World”. In this two-part series, we’ll go further by using Nitro to build an actual backend application — a food truck / coffee shop API that could realistically power a real product.

In Part 1, we’ll focus on:

• Project setup
• Application structure
• Core API routes (menu, orders, hours)
• Runtime configuration
• Local development

In Part 2, we’ll expand this into:

• Order creation and validation
• Persistence (in-memory → storage)
• Middleware and plugins
• Deployment-ready architecture

This series assumes basic JavaScript/TypeScript knowledge but no prior Nitro experience.

Introduction

In Part 1, we built the foundation of BrewStop, a food truck / coffee shop backend powered by Nitro. We created menu endpoints, business hours, and a basic order flow.

In Part 2, we’ll turn that prototype into something production-ready by adding:

• Input validation
• Persistent storage (using UnJS tools)
• Order status updates
• Middleware & plugins
• Better structure for deployment

This is where Nitro really shines — small additions, big capability.

Introduction

At Mashed Potato Studios, we believe great digital products should be simple, effective, and memorable—just like comfort food done right. Our website, mashedpotatostudios.com, reflects who we are: a creative digital studio focused on building solutions that make sense for real people and real businesses.

The New Vue Default

Important notice: Vue will become default version on February 7, 2022.

Performance#

Nuxt.js provides some unique advantages which allowed for it to be the main choice when creating my website.

Introduction

Modern web applications increasingly require flexible, performant backends that can run anywhere from edge servers to traditional Node hosts. That’s where Nitro comes in — a lightweight, runtime-agnostic server toolkit that lets you build APIs, server logic, and backend functionality with minimal configuration and deploy it across platforms seamlessly. Nitro works standalone or as the server engine under frameworks like Nuxt and Vite-based apps. oaicite:0

In this post, we’ll explore how to use Nitro, walk through practical examples, and show you how to build and deploy real server-side logic using this powerful tool.

Introduction

Nitro is a lightweight, runtime-agnostic server framework that lets you build fast APIs and backends deployable anywhere. But what happens when you need more than basic routes? That’s where Nitro plugins come in — a powerful way to hook into Nitro’s runtime and extend its behavior.:contentReferenceoaicite:1

In this post we’ll cover:

• What Nitro plugins are
• How to create one
• Useful plugin ideas you can build for real applications

Introduction

In the previous post, we explored what Nitro plugins are and why they’re one of Nitro’s most powerful features. In this tutorial-focused follow-up, we’ll build real Nitro plugins step by step — the kind you’d actually use in production.

By the end, you’ll know how to create plugins for:

• Request logging
• API key authentication
• Response caching
• Feature flags and runtime configuration

All examples use TypeScript and work in Nuxt + Nitro or standalone Nitro apps.

Introduction

Nuxt has consistently positioned itself as one of the most developer-friendly frameworks in the Vue ecosystem. With the release of Nuxt 4, the framework doubled down on clarity, performance, and full-stack flexibility. The latest stable release, Nuxt 4.2, continues that trajectory—not by reinventing the framework, but by polishing the parts developers interact with every single day.

This post evaluates Nuxt 4.2 from a practical standpoint: what’s new, why it matters, and how these changes help developers build faster, more resilient, and more maintainable applications.

Introduction

Every production application needs authentication. Yet it's one of the most commonly botched parts of web development—poorly implemented auth leads to security vulnerabilities, frustrated users, and late-night debugging sessions.

In this comprehensive guide, we'll cover everything you need to know about authentication in Nuxt 4:

• Authentication strategies and when to use each
• Implementing session-based auth
• JWT authentication flow
• OAuth with GitHub and Google
• Protecting API routes
• Secure password handling
• Type-safe auth with TypeScript

Let's build a complete auth system for our BrewStop application.

Mastering Nuxt Layers

Introduction#

Nuxt 3 introduced many powerful features, but Nuxt Layers stand out as one of the most transformative. Layers allow you to build applications by composing reusable Nuxt projects, instead of maintaining large monolithic codebases or copying boilerplate across repositories.

If you’ve ever wanted to:

• Reuse layouts, components, and pages across projects
• Build a scalable SaaS architecture
• Maintain a shared design system or feature set

Then Nuxt Layers are exactly what you’re looking for.

This guide is written as a long-form tutorial. You can follow along step by step and apply everything directly to real projects.

Nuxt3 RC

Since its release last year October, Nuxt 3 Beta to RC10; Nuxt developers and maintainers have place a lot of emphasis on the performance first to be blazing fast with impressive features suchas auto imports (the best feature to date) and not coming to nearly a year the stable version should see the long await Hybrid Generation which will allow developers to develop web application to exisit on both a static and server side rendered environment. So lets look at RC10 and see if we can make heads or tails of this release.

Introduction

Cross-platform development has become the default approach for building modern applications. Among the many frameworks available, React Native has long been the industry standard. However, newer frameworks like Dioxus 0.7 are challenging that position by offering a Rust-first, high-performance alternative.

In this post, we’ll compare Dioxus and React Native across architecture, performance, developer experience, tooling, and ecosystem to help you decide which framework fits your next project.

Introduction

What if leveling up your coding skills felt more like playing your favorite RPG than checking off tasks? That’s exactly the experience The Solo Level delivers — a gamified, AI-enhanced platform that makes coding fun, competitive, and deeply motivating. If you’re a developer looking to stay engaged, track progress, and connect with others on the same journey, this is one tool you’ll want in your toolkit in 2026.

Introduction

Data fetching is one of the most common challenges developers face when building modern web applications. While it might seem straightforward at first, managing server state quickly becomes complex when you need to handle caching, background updates, pagination, and error states. This is where TanStack Query (formerly React Query) comes in—a powerful library that transforms how we think about server state management.

Introduction

Routing has always been one of those “it works… until it doesn’t” parts of web development. As applications grow, routes become harder to reason about, parameters drift out of sync, and refactors turn into a game of whack-a-mole.

TanStack Router was created to solve exactly that problem.

Built with type safety first, TanStack Router flips the traditional routing model on its head. Instead of hoping your routes, params, loaders, and links line up, the router guarantees they do—at compile time.

In this post, we’ll explore what makes TanStack Router different, why it matters, and how to use it effectively in real-world applications.

Introduction

The UnJS ecosystem is a large collection of focused, composable JavaScript utilities and tools created to empower developers with performant, agnostic building blocks. Instead of monolithic frameworks with opinionated APIs, UnJS packages are small, well-scoped, and interoperable — letting you pick exactly what you need for your app’s architecture and tooling. oaicite:0

In this post, we’ll focus on the main UnJS packages you’d use to build a real-world application and how they integrate together.

Introduction

Teachers spend hours every week calculating grades, curving scores, and converting percentages to letter grades. Most of this work happens in spreadsheets with fragile formulas that break the moment a student is added out of order.

What if we packaged those utilities as a reusable TypeScript library — something any teacher or school app developer could npm install and use?

In this post, we'll build teacher-toolkit — an npm package for grade calculations — using Vite+ and its vp pack command. No Webpack config. No tsconfig gymnastics. Just code, test, and ship.

Introduction

If you've been juggling Node version managers, package managers, linters, formatters, test runners, and build tools — you're not alone. The JavaScript tooling landscape has gotten out of hand.

Vite+ aims to fix that. Created by VoidZero — the team behind Vite, Vitest, Oxc, and Rolldown — it unifies your entire development workflow into a single CLI tool called vp.